<template>
  <a-modal :title="formTile + '颜色'" :visible="true" width="60%" :footer="null" @cancel="reset">
    <div class="main">
      <a-card>
        <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="rules">
          <a-form-model-item label="销售色" prop="colorCode">
            <a-select v-model="form.colorCode" placeholder="请选择销售色" show-search :disabled="disabled"
              @search="handleSearch" @change="handleChange" :filterOption="filterOption">
              <a-select-option v-for="(item) in backList" :key="item.code" :value="item.code" :title="item.name">
                {{ item.code }}-{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="厂家色号">
            <a-input placeholder="请输入厂家色号" v-model="form.manufactorColorCode" />
          </a-form-model-item>
          <a-form-model-item label="图案编号" prop="patternCode">
            <a-select v-model="form.patternCode" placeholder="请选择图案编号" show-search>
              <a-select-option v-for="(item, index) in patternList" :key="index" :value="item.code">
                {{ item.code }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="颜色状态" prop="colorStatus">
            <a-radio-group v-model="form.accColorStatus">
              <a-radio :value="10">
                启用
              </a-radio>
              <a-radio :value="20">
                停用
              </a-radio>
            </a-radio-group>

          </a-form-model-item>
          <a-form-model-item label="过检针等级">
            <a-select v-model="form.checkGrade" placeholder="过检针等级" show-search :filterOption="filterOption" @change="handleChangeGrade">
              <a-select-option v-for="(item) in gradeList" :key="item.code" :value="item.code" :title="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="备注" prop="remark">
            <a-input placeholder="请输入备注" type="textarea" v-model="form.remark" />
          </a-form-model-item>
          <a-form-model-item label="价格方案" prop="purchasingUnit">
            <div v-for="(item, index) in fileds" :key="index">
              <div style="display: flex;margin-bottom:10px">
                <a-form-model-item style="margin-bottom:0px">
                  <a-select allow-clear style="width:150px" v-model="form.supplyPriceScheme[index].supplyCode"
                    placeholder="请选择供应商" @change="changeSupply(index)">
                    <a-select-option v-for="(item, i) in supplyList" :key="i" :value="item.supplyCode">
                      {{ item.supplyName }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model-item
                  style="margin-bottom:0px;margin-left:20px;display: flex;justify-content: space-between;">
                  <!-- <a-tag
                    closable
                    @close="delectPrice"
                    color="blue"
                    v-if="form.supplyPriceScheme[index].supplyPriceSchemeName"
                  >
                    {{form.supplyPriceScheme[index].supplyPriceSchemeName}}
                  </a-tag> -->
                  <a-select allow-clear style="width:150px" v-if="form.supplyPriceScheme[index].supplyPriceSchemeName"
                    v-model="form.supplyPriceScheme[index].supplyPriceSchemeName">
                    <a-select-option :value="form.supplyPriceScheme[index].supplyPriceSchemeName">
                      {{ form.supplyPriceScheme[index].supplyPriceSchemeName }}
                    </a-select-option>
                  </a-select>
                  <a-button @click="toSupply(index)" style="margin-left:20px">
                    选择
                  </a-button>
                  <a-icon class="dynamic-delete-button mt-10" type="minus-circle-o" @click="() => remove(index)" />
                </a-form-model-item>

              </div>
              <!-- </a-form-item> -->

            </div>
          </a-form-model-item>
          <a-form-model-item>
            <a-row style="margin-top:10px">
              <a-col :span="16" :offset="18" class="info-action">
                <a-button type="link" @click="add">
                  <a-icon type="plus" />新增价格方案
                </a-button>
                <a-button :style="{ marginLeft: '8px' }" @click="reset">
                  重置
                </a-button>
                <a-button :style="{ marginLeft: '8px' }" type="primary" @click="onSubmit" :loading="loading">
                  保存
                </a-button>
              </a-col>
            </a-row>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </div>
    <supplyPrice v-if="showSupplyPrice" :supplyCode="supplyCode" @closePrice="closePrice">
    </supplyPrice>
  </a-modal>
</template>
  
<script>
import { postAction } from '@/api/manage'
import supplyPrice from './supplyPrice.vue'

import { seachColor, seachPatternColor, getDictChildList } from '@api/material/index'

export default {
  components: {
    supplyPrice
  },

  props: {
    colorDetail: {
      type: Object,
      default: null
    },
    colorIndex: {
      type: Number,
      default: null
    },
    supplyList: {
      type: Array,
      default: null
    }
  },

  data() {
    return {
      patternList: [],
      urlKey: 'basemgt-material/',
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
      backList: [],
      fileds: [],
      gradeList: [],
      supplyCode: '',
      num: '',
      disabled: false,
      selectSupplyPrice: '',
      showSupplyPrice: false,
      form: {
        colorCode: undefined,
        colorName: '',
        manufactorColorCode: '',
        patternCode: undefined,
        checkGrade: undefined,
        checkGradeValue: undefined,
        materialColorId: '',
        accColorStatus: 10,
        remark: '',
        supplyPriceSchemeId: undefined,
        supplyPriceScheme: []
      },
      rules: {
        colorCode: [{ required: true, message: '请输入销售色', trigger: 'blur' }],
        manufactorColorCode: [{ required: true, message: '请输入厂家色号', trigger: 'blur' }]
      },
      loading: false
    }
  },

  created() {
    const { colorDetail } = this.$props

    if (colorDetail) {
      if (this.$route.query.examine == 10) {
        this.disabled = true
      }
      this.formTile = '编辑'
      this.form = colorDetail
      this.form.colorStatus = Number(colorDetail.colorStatus)
      if (this.form.supplyPriceScheme.length) {
        this.fileds = this.form.supplyPriceScheme
      } else {
        this.add()
      }
    } else {
      this.formTile = '新增'
      this.add()
    }
    this.handleSearch('')
    this.getPatternList('')
    this.getGradeList()
  },
  mounted() { },
  computed: {
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },
  methods: {
    reset() {
      this.$refs.ruleForm.resetFields()
      console.log(this.form)
      this.$emit('closeColor')
    },
    remove(index) {
      this.fileds.splice(index, 1)
      this.form.supplyPriceScheme.splice(index, 1)
    },
    add() {
      this.fileds = this.form.supplyPriceScheme
      const obj = { supplyCode: undefined, supplyPriceSchemeId: undefined, supplyPriceSchemeName: '' }
      this.fileds.push(obj)
      this.form.supplyPriceScheme = this.fileds
    },
    async getGradeList() {
      const params = {
        name: 'CHECK_GRADE',
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this.gradeList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取过检针等级列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取过检针等级列表失败！')
      }
    },
    toSupply(index) {
      if (!this.form.supplyPriceScheme[index].supplyCode) {
        this.$message.error('请先选择供应商！')
      } else {
        this.supplyCode = this.form.supplyPriceScheme[index].supplyCode
        this.num = index
        this.showSupplyPrice = true
      }
    },
    closePrice(supplyPrice) {
      this.showSupplyPrice = false
      if (supplyPrice) {
        this.form.supplyPriceScheme[this.num].supplyPriceSchemeName = supplyPrice.name
        this.form.supplyPriceScheme[this.num].supplyPriceSchemeId = supplyPrice.supplyPriceSchemeId
      }
    },
    changeSupply(i) {
      this.form.supplyPriceScheme[i].supplyPriceSchemeName = ''
      this.form.supplyPriceScheme[i].supplyPriceSchemeId = ''
    },
    delectPrice() {
      this.supplyPrice = {}
    },
    async handleSearch(value) {
      const res = await seachColor({ keyWord: value })
      if (res.code == 200) {
        this.backList = res.data
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('获取颜色列表失败！')
        }
      }
    },
    async getPatternList(value) {
      const res = await seachPatternColor({ keyWord: value })
      if (res.code == 200) {
        this.patternList = res.data
        this.patternList.map(item => {
          item.code = item.patternCode + '-' + item.colorCode
        })
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('获取图案列表失败！')
        }
      }
    },
    filterOption(input, option) {
      if (option && option.props && option.props.title) {
        return option.props.title === input || option.props.title.indexOf(input) !== -1
      } else {
        return true
      }
    },
    handleChange(value) {
      this.backList.map(item => {
        if (item.code == value) {
          this.form.materialColorId = item.materialColorId
          this.form.colorName = item.name
          this.form.colorStatus = item.status
        }
      })
    },
    handleChangeGrade(value) {
      this.gradeList.map(item => {
        if (item.code == value) {
          this.form.checkGrade = item.code
          this.form.checkGradeValue = item.name
        }
      })
    },
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.submit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submit() {
      console.log(11);
      const params = JSON.parse(JSON.stringify(this.form))
      if (!params.supplyPriceScheme[0].supplyPriceSchemeId && !params.supplyPriceScheme[0].supplyCode) {
        delete params.supplyPriceScheme
        params.supplyPriceScheme = []
      }
      this.$emit('closeColor', params, this.colorIndex)
    }
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.ml-20 {
  margin-left: 20px;
}

.dynamic-delete-button {
  cursor: pointer;
  position: absolute;
  right: -40px;
  top: -4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>